<template>
  <div class="list">
    <van-search placeholder="小葵花课堂" @click="search" />
    <div class="main">
      <div class="life">
        <van-sidebar v-model="value">
          <van-sidebar-item v-for="item in biglei" :key="item" :title="item" />
        </van-sidebar>
      </div>
      <div class="right">
        <div class="img_top">
          <img
            src="https://img.xiaopiu.com/userImages/img32515f0ad52e00.png"
            alt=""
          />
        </div>
        <div class="list_main">
          <div class="list_list" v-for="(z, j) in xobj" :key="z.id">
            <a href="#">{{ j }} ></a>
            <van-grid direction="horizontal" :column-num="3">
              <van-grid-item
                v-for="(item, index) in z"
                :key="index"
                :text="item.minlei"
                @click="ppt"
              />
            </van-grid>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get } from "../tools/request";
export default {
  data() {
    return {
      value: 0,
      list: [],
      biglei: "",
      zhonglei: [],
      xobj: {},
    };
  },
  created() {
    this.$store.commit("tabShow");
    this.$emit("changePage", "List");
    get("/api/l1/course").then((res) => {
      this.list = res.data;
      let obj = {};
      this.biglei = this.list
        .filter((item) => {
          if (!obj[item.biglei]) {
            obj[item.biglei] = "有了";
            return item;
          }
        })
        .map((item) => item.biglei);
      this.hhh(0);
    });
  },
  methods: {
    search() {
      this.$router.push({ name: "search" });
    },
    ppt() {
      this.$router.push({ name: "ppt" });
    },
    hhh(value) {
      this.$nextTick(() => {
        this.zhonglei = [];
        for (let i = 0; i < this.list.length; i++) {
          if (this.list[i].biglei == this.biglei[value]) {
            this.zhonglei.push(this.list[i]);
          }
        }
        this.xobj = {};
        this.zhonglei.map((item) => {
          if (!this.xobj[item.zhonglei]) {
            this.xobj[item.zhonglei] = [item];
          } else {
            this.xobj[item.zhonglei].push(item);
          }
        });
      });
    },
  },
  watch: {
    value(l) {
      this.hhh(l);
    },
  },
};
</script>

<style lang="scss">
.van-search__content {
  border-radius: 17px;
  overflow: hidden;
}
.list {
  height: 100%;
  display: flex;
  flex-direction: column;
  .main {
    width: 100%;
    flex: 1;
    display: flex;
    justify-content: center;
    overflow: auto;
  }
  .right {
    flex: 1;
    padding: 10px;
    display: flex;
    flex-direction: column;
    img {
      width: 100%;
    }
    .list_main {
      flex: 1;
      a {
        display: block;
        margin: 5px 0;
        font-size: 14px;
        color: #646566;
      }
      .list_list {
        margin: 5px 0;
      }
    }
    .van-grid-item__content {
      padding: 0;
      margin: 5px;
    }

    [class*="van-hairline"]::after {
      border-top: 0;
      border-radius: 30px;
    }
  }
  .van-sidebar-item {
    padding: 15px 12px;
  }
  .van-sidebar-item--select::before {
    background-color: green;
    height: 100%;
  }
}
</style>
